﻿<!doctype html>
<html lang="en">
<head>
            <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品说明</title>
    <link rel="stylesheet" href="static/assets/plugsin/css/font-awesome-4.7.0/css/font-awesome.css">
    <!-- begin::global styles -->
    <link rel="stylesheet" href="static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="static/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="static/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

{#<!-- begin::sidebar -->#}
{#<div class="sidebar">#}
{#    <ul class="nav nav-pills nav-justified m-b-30" id="pills-tab" role="tablist">#}
{#        <li class="nav-item">#}
{#            <a class="nav-link" id="notifications-tab" data-toggle="pill" href="#notifications" role="tab"#}
{#               aria-controls="notifications" aria-selected="false">#}
{#                <i class="fa fa-bell"></i>#}
{#            </a>#}
{#        </li>#}
{#        <li class="nav-item">#}
{#            <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab"#}
{#               aria-controls="settings" aria-selected="false">#}
{#                <i class="ti-settings"></i>#}
{#            </a>#}
{#        </li>#}
{#    </ul>#}
{#    <div class="tab-content" id="pills-tabContent">#}
{#        <div class="tab-pane" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">#}
{#            <div class="tab-pane-body">#}
{#                <h5 class="font-weight-bold m-b-20">Notifications</h5>#}
{#                <div>#}
{#                    <p class="text-muted">Today</p>#}
{#                    <ul class="list-group list-group-flush m-b-10">#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title bg-success rounded-circle">A</span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">#}
{#                                    <span class="badge small badge-danger">New</span>#}
{#                                    New user registration.#}
{#                                </p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">8 minute ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-cloud-upload"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Files uploaded successfully.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">50 minute ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div>#}
{#                    <p class="text-muted">Yesterday</p>#}
{#                    <ul class="list-group list-group-flush m-b-10">#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title bg-warning rounded-circle">V</span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">New user registration.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">5 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-file-o"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Your invoice prepared.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">10 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex p-l-r-0">#}
{#                            <div>#}
{#                                <figure class="avatar avatar-xs m-r-10">#}
{#                                    <span class="avatar-title rounded-circle">#}
{#                                        <i class="fa fa-cloud-upload"></i>#}
{#                                    </span>#}
{#                                </figure>#}
{#                            </div>#}
{#                            <div>#}
{#                                <p class="m-b-0">Files uploaded successfully.</p>#}
{#                                <ul class="list-inline small">#}
{#                                    <li class="list-inline-item text-muted">16 hours ago</li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">Mark Read</a>#}
{#                                    </li>#}
{#                                    <li class="list-inline-item">#}
{#                                        <a href="#">View</a>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#            </div>#}
{#            <div class="tab-pane-footer">#}
{#                <a href="#" class="btn btn-primary btn-block">Mark All Read</a>#}
{#            </div>#}
{#        </div>#}
{#        <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">#}
{#            <div class="tab-pane-body">#}
{#                <div class="m-b-30">#}
{#                    <h5 class="font-weight-bold m-b-20">Settings</h5>#}
{#                    <h6 class="font-weight-bold">System</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Automatic updates</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>#}
{#                                <label class="custom-control-label" for="customSwitch1"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Current statistics</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>#}
{#                                <label class="custom-control-label" for="customSwitch2"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>User suggestions</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch3" checked>#}
{#                                <label class="custom-control-label" for="customSwitch3"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="m-b-30">#}
{#                    <h6 class="font-weight-bold">Accout</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Senior account security</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch4">#}
{#                                <label class="custom-control-label" for="customSwitch4"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Account protection</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch5" checked>#}
{#                                <label class="custom-control-label" for="customSwitch5"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#                <div class="m-b-30">#}
{#                    <h6 class="font-weight-bold">Notifications</h6>#}
{#                    <ul class="list-group list-group-flush">#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Browser notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch6">#}
{#                                <label class="custom-control-label" for="customSwitch6"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Mobile notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch7">#}
{#                                <label class="custom-control-label" for="customSwitch7"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Email subscription</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch8">#}
{#                                <label class="custom-control-label" for="customSwitch8"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                        <li class="list-group-item d-flex justify-content-between p-l-r-0">#}
{#                            <span>Sms notifications</span>#}
{#                            <div class="custom-control custom-switch">#}
{#                                <input type="checkbox" class="custom-control-input" id="customSwitch9" checked>#}
{#                                <label class="custom-control-label" for="customSwitch9"></label>#}
{#                            </div>#}
{#                        </li>#}
{#                    </ul>#}
{#                </div>#}
{#            </div>#}
{#            <div class="tab-pane-footer">#}
{#                <a href="#" class="btn btn-primary btn-block">Save Settings</a>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</div>#}
<!-- end::sidebar -->

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="side-menu-divider">Navigation</li>
            <li style="margin-bottom: 20px">
                <a href="/upload_train" onclick="clearCacheAndRedirect(event)"><i class="icon ti-files"></i>
                    <span style="font-size: large">训练</span> </a>
            </li>
            <li style="margin-bottom: 20px"><a href="/upload_test" onclick="clearCacheAndRedirect(event)"><i class="icon ti-file"></i>
                <span style="font-size: large">测试</span>
            </a></li>
            <li style="margin-bottom: 20px">
                <a href="/show_result" onclick="clearCacheAndRedirect(event)">
                    <i class="icon ti-layout"></i>
                    <span style="font-size: large">结果可视化</span>
                </a >
            </li>
            <li style="margin-bottom: 20px">
                <a href="/pro_info"><i class="icon ti-comment-alt" onclick="clearCacheAndRedirect(event)"></i>
                    <span style="font-size: large">产品说明</span> </a>
            </li>
            <li style="margin-bottom: 20px">
                <a href="/" onclick="clearCacheAndRedirect(event)">
                    <i class="icon ti-world"></i>
                    <span style="font-size: large">返回主页</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="static/assets/media/image/team_logo.png" alt="...">
                <span class="logo-text d-none d-lg-block" style="font-family: Aa阳关曲;font-size: x-large">Eyenergy</span>
            </a>
        </div>

        <div class="header-body">
            <ul class="navbar-nav">
                <li class="nav-item dropdown d-none d-lg-block">
                    <a href="#" class="nav-link" data-toggle="dropdown">
                        <i class="fa fa-th-large"></i>
                    </a>
                </li>
            </ul>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="d-lg-none d-sm-block nav-link search-panel-open">
                        <i class="fa fa-search"></i>
                    </a>
                </li>


            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>产品说明</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">模型介绍</li>
                    <li class="breadcrumb-item" style="font-size: 15px;font-family: 微软雅黑">网页介绍</li>
                    <li class="breadcrumb-item"  style="font-size: 15px;font-family: 微软雅黑">使用说明</li>
                    <li class="breadcrumb-item active" aria-current="page" style="font-size: 15px;font-family: 微软雅黑">产品说明</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h3 style="color:#2e9ad0 "><strong>Eyenergy--基于机器学习的故障诊断系统</strong></h3>
            </div>
            <div class="card-body">
                <div  style="font-size: large; line-height:normal">
                <i class="fa fa-cog"></i>

                    <i style="color: black">本系统由<strong>向量分类器子系统</strong>，<strong>故障预测子系统</strong>以及<strong>结果可视化子系统</strong>构成。<br><br></i>
                    其中，<strong>向量分类器子系统</strong>用于对用户传入的故障特征进行预测，同时支持用户重新训练模型。<br><br>
                    <strong>故障预测子系统</strong>用于根据用户传入的故障特征进行故障诊断模型的在线训练，同时支持用户自选训练模型对故障特征进行分类以确定故障类型。<br><br>
                    <strong>结果可视化子系统</strong>用于使预测结果变得易于理解，并以多种方式展示给用户。<br><br>
                    系统的<strong>具体架构图</strong>如右图所示。<br><br>
                    </div>
                <div  style="font-size: large; line-height:normal">
                <i class="fa fa-cog"></i>
                    <i style="color: black"><strong>具体操作指南</strong><br><br></i>
                    页面的具体<strong>操作流程</strong>如右图所示。<br><br>
                    用户进入网站后首先进入<strong>主页</strong>界面，通过点击左部导航栏链接，可选择跳转至产品说明界面阅读网页介绍，<br><br>
                    进入<strong>训练</strong>页面后，用户可上传训练集和验证集（可选）和修改模型参数后可点击开始训练按钮进行训练，训练完成后可下载模型文件，<br><br>
                    完成训练后可进入<strong>测试</strong>界面，上传测试集文件后即可选择查询各故障占比排名或者查询样本所属故障种类，<br><br>
                        完成测试后可进入结果可视化界面，查看基于测试分类结果生成的各类图表。
                    </div>
            </div>
        </div>
    </div>
    <div class="column">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 style="color:#3b5998 "><strong>系统架构图</strong></h4>
            </div>
            <div class="card-body">
                <img src="static/assets/media/image/网页结构.png" style="height:370px;width:560px">
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 style="color:#3b5998 "><strong>页面操作流程图</strong></h4>
            </div>
            <div class="card-body">
                <img src="static/assets/media/image/用户使用说明.png" style="height:370px;width:560px">
            </div>
        </div>
        </div>
    </div>
</div>
    </div>
</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
{#<script src="static/assets/js/custom.js"></script>#}
<script src="static/assets/js/app.js"></script>
<!-- end::custom scripts -->
<script>

  function clearCacheAndRedirect(event) {
    // 清空缓冲区代码
    localStorage.removeItem('fileResult');
    localStorage.removeItem('lossData');
    // 执行其他操作，例如页面重定向
    window.location.href = event.target.href;

    // 取消默认行为
    {#event.preventDefault();#}
  }
</script>
</body>
</html>